<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>魂魄魂晶属性</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>魂魄魂晶属性</legend>
        </fieldset>

        <div class="layui-form"  lay-filter="detail-form">

            <div class="layui-form-item">
                <label class="layui-form-label">品质</label>
                <div class="layui-input-block">
                    <input type="number" min="1" max="4" step="1" name="quality" v-model="formData.quality" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">等级</label>
                <div class="layui-input-block">
                    <input type="number" name="level" v-model="formData.level"
                           autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">当前经验</label>
                <div class="layui-input-block">
                    <input type="number" name="exp" v-model="formData.exp" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">当前生命</label>
                <div class="layui-input-block">
                    <input type="number" name="life" v-model="formData.life" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">灵力值</label>
                <div class="layui-input-block">
                    <input type="number"  name="nimbus" v-model="formData.nimbus" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">杀怪物理积分</label>
                <div class="layui-input-block">
                    <input type="number"  name="phyScore" v-model="formData.phyScore" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">杀怪法术积分</label>
                <div class="layui-input-block">
                    <input type="number"  name="magScore" v-model="formData.magScore" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">喂养物理积分</label>
                <div class="layui-input-block">
                    <input type="number"  name="feedPhyScore" v-model="formData.feedPhyScore" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">喂养法术积分</label>
                <div class="layui-input-block">
                    <input type="number"  name="feedMagScore" v-model="formData.feedMagScore" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">魂魄天赋</label>
                <div class="layui-input-block">
                    <select name="soulTalentId" class="layui-select">
                        <option value="">--请选择--</option>
                        <option :value="item.id" v-for="item in soulTalentList">{{item.name}}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">激发技能</label>
                <div class="layui-input-block">
                    <select name="soulSkillId" class="layui-select">
                        <option value="">--请选择--</option>
                        <option :value="item.id" v-for="item in soulSkillList">{{item.name}}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">魂魄属性</label> <!--最大5个-->
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-sm" v-on:click="soulAttrAdd()">添加</button>
                    <div class="select-list layui-clear">
                        <div v-for="(item,index) in formData.soulAttrList" class="left">
                            <div class="layui-inline" style="width:120px;">
                                <select class="layui-select" lay-search="" :data-index="index" name="soulAttrId[]">
                                    <option value="">选择属性</option>
                                    <option :value="row.id" v-for="row in equipAttrList">{{row.name}}</option>
                                </select>
                            </div>
                            <div class="layui-inline" style="width:70px;margin-right: 10px;">
                                <input type="number" class="layui-input" name="soulAttrValue[]" />
                            </div>
                            <i class="layui-icon del" style="color: red;" v-on:click="formData.soulAttrList.splice(index,1)"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script>
    var _this = null,form=null
    new Vue({
        el:"#app",
        data:{
           soulTalentList:getEnum("soulTalent"),
           soulSkillList:getEnum("soulSkill"),
           equipAttrList:getEnum("equipAttr"),
           formData:{
               soulAttrList:[],//魂魄属性
               quality:1, //品质
               level:1, //等级
               exp:1,
               life:5,
               nimbus:100,
               phyScore:0,
               magScore:0,
               feedPhyScore:0,
               feedMagScore:0,
               talentId:null,
               skillId:null,
               addiAttr:[], //附加属性
               linHe:null, //灵合数据 直接传空
           }
        },
        created(){
            _this = this
        },
        updated:function(){
            form.render()
        },
        methods:{
            soulAttrAdd(){
                this.formData.soulAttrList.push({
                    id:null,
                    value:'',
                })
            }
        },
        mounted:function(){
            var _this = this;

            layui.use(['form','jquery'], function () {
                form = layui.form;
                layer = layui.layer;
                $ = layui.jquery;

                form.render();

                form.on("submit(submit)",function (data) {
                    var formData = data.field

                    var soulAttrIds = []
                    var soulAttrValues = []

                    for(k in formData){
                        var v = formData[k]
                        if (k.indexOf("soulAttrId")!==-1){
                            soulAttrIds.push(v)
                            delete formData[k]
                        }
                        if (k.indexOf("soulAttrValue")!==-1){
                            soulAttrValues.push(v)
                            delete formData[k]
                        }
                    }
                    formData.soulAttrIds = soulAttrIds
                    formData.soulAttrValues = soulAttrValues

                    parent.soulAttrSetCallback(formData)
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                    return false;
                })

            });

        }
    })
</script>

</body>
</html>